<html>
    <head>
        <style>
            *{
                margin:0px;padding:0px;
            }
            body,html{
                width:100%;
                height:100%;
            }
        </style>
        <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    </head>
    <body style="overflow: hidden;">
        <div style="display:flex;height:100%;flex-direction: column;margin:5px auto;">
            <div style="display:flex;align-items:center;margin:10px 0 0 10px;">
                <div onclick="download()" style="margin-left:15px;width:100px;height:40px;background:#009688;border-radius:3px;line-height:40px;text-align:center;color:white;cursor:pointer;">导出</div>

            </div>
            <div id="container" style="overflow-y: auto;flex-grow:1;margin:10px 0 0 10px;">
            </div>
        </div>
    </body>
    <script src="/js/layui/layui.js"></script>
<!--    <script src="./js/print.min.js"></script>-->
    <script>
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }

        var ids = getQueryVariable("ids")
        var t = getQueryVariable("type")
        var page = getQueryVariable("page")

        var arr = ids.split(",")

        layui.use('form', function(){
            var form = layui.form;
            $ = layui.$
            initSel();
        });

        function initSel(){
            $("#container img").remove()
            for(var i = 0 ; i < arr.length ; i++) {
                var img = document.createElement("img")
                var img2 = document.createElement("img")
                if (page == 1) {
                    img.src = "/gongpai/draw_gongpai?id=" + arr[i] + "&type=" + t + "&flag=" + 1
                    img2.src = "/gongpai/draw_gongpai?id=" + arr[i] + "&type=" + t + "&flag=" + 0
                }
                img.style.border = "1px solid grey"
                img.style.width = "400px"
                img.style.height = "252px"
                img.style.margin = "5px"
                document.getElementById("container").appendChild(img)

                img2.style.border = "1px solid grey"
                img2.style.width = "400px"
                img2.style.height = "252px"
                img2.style.margin = "5px"
                document.getElementById("container").appendChild(img2)
                // img.onclick=function(){
                //     printJS({printable: img.getAttribute("src"), type: 'image', honorColor:true})
                // }
            }
        }

        function downloadIamge(imgsrc, name,m) { //下载图片地址和图片名
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");

            image.onload = function() {
                var str = "";
                if (m == 1) {
                    str = "反面"
                }else {
                    str = "正面"
                }
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = str + "-" + name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        }
        function download(){
            var imgs = document.querySelectorAll("#container img")
            for(let i = 0 ; i < imgs.length ; i++) {
                let m = i ;
                $.ajax({
                    url:"/cheliang/getCheliangById?id="+arr ,
                    async:false ,
                    success:function(res){
                        if (res.code == 0) {
                            downloadIamge(imgs[m].getAttribute("src") ,res.data.name+"-"+res.data.paizhao,m) ;
                        }
                    }
                })
            }
        }

        function back() {
            window.location.href = document.referrer;
        }
    </script>
</html>